<template>
    <div id="box">
        <h2>{{ title }}</h2>
        <el-form label-width="80px"
                 :rules="rules" ref="userFrom"
                 :label-position="labelPosition" :model="user">
            <el-form-item label="用户名" prop="username">
                <el-input placeholder="用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" placeholder="密码" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//  export  导出当前模块
export default {
    name: "LoginView",
    data() {
        return {
            labelPosition: 'right',
            title: '欢迎登录',
            user: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        submitForm() {
            // 校验用户填写的数据是否符合要求    valid 标识表单校验的结果 满足自定义的校验规则返回true
            this.$refs.userFrom.validate((valid)=>{
                if (valid){
                    // 发送异步请求
                    console.log(JSON.stringify(this.user))
                    let {username,password} = this.user

                    if (username=='tom'&&password=='123456'){
                        // 信息提示
                        // this.$message.success("认证通过")
                        this.$message(
                            {
                                 message: '认证通过',
                                 type: 'success',
                                onClose:()=>{
                                     // 跳转路由
                                    this.$router.push("/index")
                                }
                        });
                    }else {
                        // 错误信息提示
                        this.$message.error('用户名或密码错误');
                    }
                }else {
                    console.log("请填写完整的表单信息")
                }
            })

        }
    },
    created() {
        // 发送异步请求
        this.user={
            username:"admin",
            password: "123456"
        }
    }
}
</script>
<!--
   scoped  该样式只对当前组件有效
-->
<style scoped>

#box {
    margin: 130px auto 0;
    width: 500px;
    height: 400px;
}

h2 {
    color: #409EFF;
    text-align: center;
}

</style>